<style lang="scss" scoped>
        .viewDetailed{
          background: #fff;
          width: calc(100% - 430px);
          height: 100%;
          float: right;
          overflow: auto;
          .mainTask,.childTask{
            .mainTitle{
              background: #E2ECFA;
              height: 40px;
              border: 1px solid rgba(188, 188, 188, 0.28);
              line-height: 40px;
              padding: 0 10px;
              .imgLeft{
                width: 24px;
                float: left;
                margin-top: 8px;
              }
              p{
                float: left;
                margin-left: 22px;
                font-size: 14px;
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: 600;

              }
              .imgRight{
                width: 24px;
                float: right;
                margin-top: 8px;
                margin-left: 8px;
                cursor: pointer;
              }
              .childdelete{
                float: right;
                margin-top: 6px;
                background: #FEF0F0;
                border: 1px solid #FBC4C4;
                color: #EB5454;
              }
            }
            .mainTitleActive{
              background: #E2F3D8;
            }
            .mainContent{
              background: #F3F7FB;
              padding: 10px;
              border: 1px solid #DCDCDC;
              .btnBox{
                line-height: 40px;
                font-size: 12px;
                height: 40px;
                text-align: center;
                margin-top: 1%;
              }
            }
            .mainContentActive{
              background: #F7FBF6;
            }
          }
          .childTask{
            width: 96%;
            margin: 0 auto;
            margin-top: 1%;
            .mainTitle{
              background: #EFEFEF;
              border: 1px solid rgba(188, 188, 188, 0.28);
              border-radius: 6px 6px 0 0;
            }
            .mainContent{
              background: #FFFFFF;
            }
          }
        }
.addCildBtn{
  width: 96%;
  height: 50px;
  font-size: 14px;
  margin: 0 auto;
  margin-top: 2%;
  text-align: center;
  margin-bottom: 2%;
  color: #448EF7;
  button{
    width: 100%;
    height: 100%;
    font-size: 14px;
  }
}
::v-deep{
  .el-form-item__label{
    font-size: 12px;
    font-weight: 600;
  }
  .el-form-item__content{
    font-size: 12px;
    font-weight: 600;
  }
  .el-form-item--small.el-form-item{
    margin-bottom: 6px;
  }
}

</style>
<template>
  <div class="viewDetailed">

    <div class="mainTask">
      <div class="mainTitle" :class="mainactive ? 'mainTitleActive' : ''">
        <img v-show="!mainactive" class="imgLeft" src="../../assets/img/task.png">
        <img v-show="mainactive" class="imgLeft" src="../../assets/img/task1.png">
        <p>{{ childObj.name }}</p>
        <el-tooltip v-show="!mainactive" class="item" effect="dark" content="变更记录" placement="top">
          <img class="imgRight" src="../../assets/img/change.png" @click="gotobiangeng()">
        </el-tooltip>

      </div>
      <div class="mainContent" :class="mainactive ? 'mainContentActive' : ''">
        <bxFilter ref="filter" label-position="left" label-width="100px" :config="!mainactive ? config : indexconfig" :row="12" @change="iputChange" />
        <!-- <div class="btnBox">
          <el-button :type="mainactive ? 'success' : 'primary'" plain round>保存</el-button>
        </div> -->
      </div>

    </div>
    <div v-for="(item,index) in childObj.list" v-show="!mainactive" :key="index" class="childTask">
      <div class="mainTitle">
        <img class="imgLeft" src="../../assets/img/task01.png">
        <p>{{ childObj.name ? childObj.name + ' -- ' : '' }}子任务{{ number }}.{{ index + 1 }}</p>
        <el-button v-show="edit === '1'" class="childdelete" icon="el-icon-delete" circle @click="childDeleteClick(index)" />
      </div>
      <div class="mainContent">
        <bxFilter :ref="item.filter" label-position="left" label-width="100px" :config="config1" />
      </div>
    </div>
    <div v-show="!mainactive" class="addCildBtn">
      <el-button icon="el-icon-circle-plus-outline" @click="addChildTesk()">
        新增子任务
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  components: {

  },
  props: {
    mainactive: {
      type: Boolean,
      default: false
    },
    edit: {
      type: String,
      default: ''
    },
    isSave: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
    missionList: {
      type: Array,
      default() {
        return []
      }
    },
    tabContent: {
      type: Object,
      default: () => {
        return {}
      }
    },
    childObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      writeFlag: 0,
      input: '',
      childFilterList: ['filter1'],
      sourceOptions: [],
      saveChildList: [],
      saveYes: false,
      number: '1',
      config: [
        {
          type: 'input',
          key: 'name',
          props: {
            label: '任务名称：',
            edit: false,
            placeholder: '请输入本任务名称'
          }
        },
        {
          type: 'select',
          key: 'dimension',
          props: {
            label: '业绩维度：',
            edit: false,
            placeholder: '请选择业绩维度',
            data: {
              options: [
                {
                  label: '战略引领',
                  value: '战略引领'
                },
                {
                  label: '价值驱动',
                  value: '价值驱动'
                },
                {
                  label: '风险管控',
                  value: '风险管控'
                }
              ]
            }
          }
        },
        {
          type: 'textarea',
          key: 'content',
          span: 15,
          props: {
            label: '任务内容：',
            edit: false,
            defaultValue: '',
            placeholder: '请输入任务名称对应的工作内容，原则上应体现该任务的关键输出工作成果'
          }
        },
        {
          type: 'date',
          key: 'finishTime',
          props: {
            label: '完成时间：',
            edit: false,
            placeholder: '请输入完成时间'
          }
        },
        {
          type: 'number',
          key: 'weight',
          props: {
            label: '权重（%）：',
            edit: false,
            placeholder: '请输入权重'
          }
        },
        {
          type: 'select',
          key: 'originalSelect',
          props: {
            label: '任务来源：',
            edit: false,
            placeholder: '请选择任务来源',
            data: {
              type: 'post',
              url: '/serviceAction/common',
              param: {
                'serviceName': 'MT01101',
                'methodName': 'getOriginal'
              },
              propsKey: { value: 'value', label: 'value' },
              format: function(res) {
                const arr = []
                res.data.map((item, index) => {
                  const obj = {
                    id: index,
                    value: item
                  }
                  arr.push(obj)
                })
                return arr
              }
            }
          }
        },
        {
          type: 'input',
          key: 'originalInput',
          props: {
            label: '来源说明：',
            edit: false,
            placeholder: '可列示来源文件名或编号'
          }
        }
      ],
      indexconfig: [
        {
          type: 'input',
          key: 'name',
          props: {
            label: '指标名称：',
            edit: false,
            placeholder: '请输入指标名称'
          }
        },
        {
          type: 'select',
          key: 'dimension',
          props: {
            label: '业绩维度：',
            edit: false,
            placeholder: '请选择业务维度',
            data: {
              options: [
                {
                  label: '战略引领',
                  value: '战略引领'
                },
                {
                  label: '价值驱动',
                  value: '价值驱动'
                },
                {
                  label: '风险管控',
                  value: '风险管控'
                }
              ]
            }
          }
        },
        {
          type: 'textarea',
          key: 'content',
          span: 15,
          props: {
            label: '指标描述及计算公式：',
            edit: false,
            defaultValue: '',
            placeholder: '请输入指标描述及计算公式'
          }
        },
        {
          type: 'input',
          key: 'target',
          props: {
            label: '指标目标：',
            edit: false,
            placeholder: '请输入目标值'
          }
        },
        {
          type: 'number',
          key: 'weight',
          props: {
            label: '权重（%）：',
            edit: false,
            placeholder: '请输入权重'
          }
        },
        {
          type: 'select',
          key: 'originalSelect',
          props: {
            label: '任务来源：',
            edit: false,
            placeholder: '请选择任务来源',
            data: {
              type: 'post',
              url: '/serviceAction/common',
              param: {
                'serviceName': 'MT01101',
                'methodName': 'getOriginal'
              },
              propsKey: { value: 'value', label: 'value' },
              format: function(res) {
                const arr = []
                res.data.map((item, index) => {
                  const obj = {
                    id: index,
                    value: item
                  }
                  arr.push(obj)
                })
                return arr
              }
            }
          }
        },
        {
          type: 'input',
          key: 'originalInput',
          props: {
            label: '来源说明：',
            edit: false,
            placeholder: '可列示来源文件名或编号'
          }
        }
      ],
      config1: [
        {
          type: 'textarea',
          key: 'content',
          span: 15,
          props: {
            label: '任务内容：',
            placeholder: '请输入子任务对应的工作内容，原则上应支撑主任务的目标完成'
            // defaultValue: '围绕全面深化改革重点领域和关键环节，协同推动改革三年行动落实落地，年底前实现任务完成率70%以上。'
          }
        },
        {
          type: 'date',
          span: 12,
          key: 'finishTime',
          props: {
            label: '完成时间：',
            placeholder: '请输入完成时间'
            // defaultValue: '2021-12-31'
          }
        },
        {
          type: 'number',
          span: 12,
          key: 'weight',
          props: {
            label: '权重（%）：',
            placeholder: '请输入权重'
            // defaultValue: '8'
          }
        },
        {
          type: 'select',
          span: 12,
          key: 'originalSelect',
          props: {
            label: '任务来源：',
            placeholder: '请选择任务来源',
            // defaultValue: '集团年度重点任务分解'
            data: {
              type: 'post',
              url: '/serviceAction/common',
              param: {
                'serviceName': 'MT01101',
                'methodName': 'getOriginal'
              },
              propsKey: { value: 'value', label: 'value' },
              format: function(res) {
                const arr = []
                res.data.map((item, index) => {
                  const obj = {
                    id: index,
                    value: item
                  }
                  arr.push(obj)
                })
                return arr
              }
            }
          }
        },
        {
          type: 'input',
          key: 'originalInput',
          span: 12,
          props: {
            label: '来源说明：',
            placeholder: '可列示来源文件名或编号'
            // defaultValue: '1'
          }
        }
      ]
    }
  },
  watch: {
    isSave(val) {
      if (val === 'save') {
        // this.allSaveChange()
      }
    },
    mainactive(val) {
      if (this.edit === '1') {
        this.$nextTick(() => {
          this.$refs.filter.setAllAttribute({
            name: 'edit',
            value: true
          })
        })
        if (val) {
          this.$nextTick(() => {
            this.number = '1'
            this.$refs.filter.setAllValue(this.tabContent.indexList[0])
          })
        } else {
          this.$nextTick(() => {
            this.$refs.filter.setAllValue(this.childObj)
          })
        }
      }
    },
    edit(val) {
      if (val === '1') {
        this.$refs.filter.setAllAttribute({
          name: 'edit',
          value: true
        })
      }
    },
    childObj(val) {
      this.number = val.detailIdentify
      this.$nextTick(() => {
        this.$refs.filter.setAllValue(val)
        if (val.add) {
          if (this.mainactive) {
            this.saveChangeIndex()
          } else {
            this.saveChange()
          }
        }
      })
      if (val.list) {
        val.list.map((item, index) => {
          const str = 'filter' + (index + 1)
          item.filter = str
          this.$nextTick(() => {
            this.$refs[str][0].setAllValue(item)
          })
        })
      }
    }
  },
  mounted() {
    // console.log('12')
  },
  methods: {
    iputChange(val) {
      // console.log(val)
      if (val.key === 'name') {
        this.childObj.name = val.value
      }
    },
    // 子任务删除
    childDeleteClick(index) {
      this.childObj.list.splice(index, 1)
      console.log('子任务删除', this.childObj.list)
    },
    getSelfData() {
      const list = []
      const mainObj = this.$refs.filter.getAllItem()
      this.childObj.list.map((item, index) => {
        const str = item.filter
        const childObjObj = this.$refs[str][0].getAllItem()
        const result = this.childObj.list.find(v => v.filter === str)
        const concatChild = { ...result, ...childObjObj }
        list.push(concatChild)
      })
      const concatObj = { ...this.childObj, ...mainObj }
      concatObj.list = list
      return concatObj
    },

    // 保存变更/重要任务
    saveChange(is) {
      this.saveChildList = []
      const mainObj = this.$refs.filter.getAllItem()
      this.childObj.list.map((item, index) => {
        const str = item.filter
        const childObjObj = this.$refs[str][0].getAllItem()
        const result = this.childObj.list.find(v => v.filter === str)
        const concatChild = { ...result, ...childObjObj }
        this.saveChildList.push(concatChild)
      })
      const concatObj = { ...this.childObj, ...mainObj }
      concatObj.list = this.saveChildList
      this.missionList.map((item, index) => {
        if (item.detailIdentify === concatObj.detailIdentify) {
          this.missionList[index] = { ...this.missionList[index], ...concatObj }
        }
      })
      this.tabContent.missionList = this.missionList
    },
    // 保存变更/重要指标
    saveChangeIndex(is) {
      this.saveChildList = []
      const mainObj = this.$refs.filter.getAllItem()
      const result = this.tabContent.indexList.find(v => v.detailIdentify === this.number)
      const concatChild = { ...result, ...mainObj }
      this.tabContent.indexList.map((item, index) => {
        if (item.detailIdentify === concatChild.detailIdentify) {
          this.tabContent.indexList[index] = concatChild
        }
      })
    },
    // allSaveChange() {
    //   if (this.mainactive) {
    //     this.saveChangeIndex()
    //   } else {
    //     this.saveChange()
    //   }
    //   this.$http.post('/serviceAction/common', {
    //     'serviceName': 'MT01101',
    //     'methodName': 'saveWebReportHistory',
    //     ...this.tabContent
    //   }).then((res) => {
    //     if (res.isSuccess) {
    //       this.saveYes = true
    //       this.$emit('saveYes', this.saveYes)
    //       this.$nextTick(() => {
    //         this.saveYes = false
    //       })
    //     }
    //   })
    // },
    // addChildTesk 新增子任务
    addChildTesk() {
      // const mainObj = this.$refs.filter.getAllItem()
      // this.childObj.name = mainObj.name
      const length = this.childObj.list.length + 1
      const str = {
        filter: 'filter' + length
      }
      this.childObj.list.push(str)
    },
    gotobiangeng() {
      this.$router.push({
        path: '/changeRecord'
      })
    }
  }
}
</script>
